<template>
  <a-modal
    :title="$t('添加商品')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :okText="$t('保存')"
    @cancel="handleCancel"
    :cancelText="$t('取消')"
    v-drag
  >
    <a-spin :spinning="confirmLoading">
      <a-form class="batchForm" :model="dataForm" >
        <a-form-item style="margin-bottom: 10px;" :label="$t('添加方式')" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
            <a-select v-model="dataForm.type" :placeholder="$t('请选择')">
              <a-select-option value="1">{{$t('按分类添加')}}</a-select-option>
              <a-select-option value="2">{{$t('按商品添加')}}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item style="margin-bottom: 10px;" :label="$t('商品分类')" v-if="dataForm.type==1" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
            <a-tree-select
                allowClear
                v-model="dataForm.parentKindId"
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                :placeholder="$t('请选择')"
                :search-placeholder="$t('请选择')"
              />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px;" :label="$t('商品名称')" v-if="dataForm.type==2" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
            <a-select
                v-model="dataForm.goodsId"
                show-search
                :placeholder="$t('请输入商品编码/名称/条码')"
                :filter-option="false"
                :not-found-content="null"
                @search="handleGoodsSearch"
              >
                <a-select-option v-for="good in addGoodsListTwo" :key="good.id">{{ good.name }}</a-select-option>
              </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { postAction,httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { getAction,putAction } from '../../../api/manage'

export default {
  name: 'AddModal',
  data() {
    return {
      width: 600,
      visible: false,
      model: {},
      confirmLoading: false,
      dataForm:{},
      treeData:[],
      allChildKind:[],
      addGoodsListTwo:[]
    }
  },
  methods: {
    show(record) {
      this.model=Object.assign({},record)
      this.dataForm={
        zone:this.model.zone,
        type:'1'
      }
      this.visible = true
      this.select()
    },
    select() {
      let that = this
      let param = {}
      param.pageNo = 1
      param.pageSize = 9999
      param.column = 'sort'
      param.order = 'asc'
      getAction('/goods/bisGoodsKind/rootList',param).then(res => {
          if (res.success) {
            that.allChildKind = []
            if (res.result.records.length > 0) {
              res.result.records.forEach(col => {
                col.key = '' + col.id
                col.value = '' + col.id
                col.title = '' + col.name
                col.id = '' + col.id
                col.pid = '' + col.pid
                col.hasChild = '' + col.hasChild
                if (col.hasChild != '0') {
                  that.getHasChild(col)
                }
              })
              that.treeData = that.getDataByResult(res.result.records)
            } else {
              that.treeData = []
            }
          } else {
            that.$alert(res.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {}
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getHasChild(record) {
      let that = this
      let query = {}
      query.pageNo = 1
      query.pageSize = 9999
      query.form= '1,7'
      query.pid= record.id
      getAction('/goods/bisGoodsKind/rootList', query)
        .then(res => {
          if (res.success) {
            if (res.result.records.length > 0) {
              res.result.records.forEach(col => {
                col.key = '' + col.id
                col.value = '' + col.id
                col.title = '' + col.name
                col.pid = '' + col.pid
                col.id = '' + col.id
                col.hasChild = '' + col.hasChild
                if (col.hasChild != '0') {
                  that.getHasChild(col)
                }
              })
              record.children = that.getDataByResult(res.result.records)
              that.treeData = [...that.treeData]
            }
          } else {
            that.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getDataByResult(result) {
      let that = this
      return result.map(item => {
        if (item.hasChild == 0 && item.key != '0') {
          that.allChildKind.push(item.key)
        }
        return item
      })
    },
    handleGoodsSearch(value) {
      this.getGoodsListTwo( value)
    },
    getGoodsListTwo(value) {
      let querydata = {}
      querydata.pageIndex = 1
      querydata.pageSize = 9999
      querydata.form = '1,7'
      querydata.goodsInfo = value
      getAction('/goods/bisGoodsInfor/list', querydata).then((res) => {
        if (res.success) {
          this.addGoodsListTwo = res.result.records
        }
      })
    },
    handleOk() {
      if(this.dataForm.type==1){
        if(!this.dataForm.parentKindId&&this.dataForm.parentKindId!==0){
          this.$message.error('请选择商品分类')
          return
        }
        delete this.dataForm.goodsId
      }
      if(this.dataForm.type==2){
        if(!this.dataForm.goodsId){
          this.$message.error('请选择商品')
          return
        }
        delete this.dataForm.parentKindId
      }
      postAction('/goods/bisGoodsZone/add',this.dataForm).then(res=>{
        if(res.success){
          this.$message.success(res.message)
          this.close()
          this.$emit('ok')
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    }
  }
}
</script>
<style>
  .batchForm .ant-form-item-label{
    width: 30%;
  }
  .batchForm .ant-form-item-control-wrapper{
    width: 62.5%;
  }
</style>